import React from "react";
import {CommentContainer, ReplyContainer} from "@/common/Comment/style";
import {Avatar, Button, Col, Comment, Divider, Form, Input, List, Pagination, Row, Switch, Tag} from "antd";
import PropTypes from "prop-types";
import {isLogin} from "@/util/global";
import Config from "@/config";
import {connect} from "react-redux";
import moment from 'moment';
import {JVip} from "@/common/Icon/Vip";
import {DarkFontColor, SuperLightFontColor} from "@/style/Color";


class JComment extends React.Component {
    constructor(props) {
        super(props);
        this.handleInputComment = this.handleInputComment.bind(this);
        this.addComment = this.addComment.bind(this);
        this.handleInputReplyComment = this.handleInputReplyComment.bind(this);
        this.addReply = this.addReply.bind(this);
        this.changePage = this.changePage.bind(this);
        this.handleSeeMoreReply = this.handleSeeMoreReply.bind(this);
        this.handlePackUpMoreReply = this.handlePackUpMoreReply.bind(this);
        this.loadInitData = this.loadInitData.bind(this);
        this.state = {
            comment: '',
            page: 1,
            size: this.props.defaultPageSize,
            isPixelate: 0,
            /* 如果用户点击了回复评论按钮，那么就会将他点击的这个评论的id赋值 */
            replyCommentId: '',
            /* 回复评论的内容 */
            replyCommentContent: '',
            /* 查看更多的评论id */
            seeMoreCommentIds: [],
        }
    }

    componentDidMount() {
        this.loadInitData();
    }

    loadInitData(pageValue = 1) {
        const {onLoad} = this.props;
        let data = {
            page: pageValue,
            size: this.state.size,
        }
        onLoad(data);
        this.setState({
            page: pageValue,
            replyCommentId: '',
            replyCommentContent: '',
            seeMoreCommentIds: [],
            comment: ''
        })
    }

    /* 输入了评论 */
    handleInputComment(e) {
        this.setState({comment: e.target.value})
    }

    /* 输入了回复 */
    handleInputReplyComment(e) {
        this.setState({replyCommentContent: e.target.value})
    }

    replyTo(commentId) {
        if (!isLogin()) {
            window._ROUTER_.push('/login')
            return;
        }
        if (this.state.replyCommentId === commentId) {
            this.setState({replyCommentId: null, replyCommentContent: ''})
        } else {
            this.setState({replyCommentId: commentId, replyCommentContent: ''})
        }
    }


    /* 提交评论 */
    addComment() {
        const {onSave, onLoad} = this.props;
        if (onSave) {
            let data = {
                parentId: null,
                content: this.state.comment,
                isPixelate: this.state.isPixelate
            }
            onSave(data,this.loadInitData);
        }
    }

    handlePackUpMoreReply(commentId) {
        let {seeMoreCommentIds} = this.state
        seeMoreCommentIds.splice(seeMoreCommentIds.indexOf(commentId), 1);
        this.setState({
            seeMoreCommentIds
        })
    }

    handleSeeMoreReply(commentId) {
        const {seeMoreCommentIds} = this.state
        seeMoreCommentIds.push(commentId);
        this.setState({
            seeMoreCommentIds
        })
    }

    doUserTypeIcon(info) {
        if (info.isVip && !info.isAdmin) {
            return <>
                {/*<Config.IconFont type={'icon-VIP3'}  style={{fontSize:'18px',margin:'0 5px',float: "left"}}/>*/}
                <JVip vipType={info.vipType} style={{transform: 'scale(0.9)', marginTop: '-10px'}}/>
            </>
        } else if (info.isAdmin) {
            return <>
                <Tag color={"#ff8400"} style={{margin: '0 5px', float: "left", lineHeight: '130%', userSelect: 'none'}}>
                    <span style={{color: "#fff"}}> 管理员</span>
                </Tag>
            </>
        } else {
            return null;
        }
    }

    /* 提交回复 */
    addReply() {
        const {onReply} = this.props;
        if (onReply) {
            let data = {
                parentId: this.state.replyCommentId,
                content: this.state.replyCommentContent,
                /* 回复不匿名 */
                isPixelate: 0,
                page: 1,
                size: 10
            }
            onReply(data,this.loadInitData);
        }
    }

    /* 分页 */
    changePage(value) {
        this.loadInitData(value);
    }

    render() {
        const {data} = this.props;
        const {TextArea} = Input;
        return <>
            <CommentContainer>
                <Row gutter={[32, 32]}>
                    <Col span={24}>
                        <Comment
                            avatar={<Row gutter={[0, 16]} style={{width: '30px'}}>
                                <Col span={24}>
                                    {
                                        isLogin() ?
                                            <Avatar src={this.props.userInfo.toJS().images} alt=""/>
                                            :
                                            <Config.IconFont type={'icon-weidenglutouxiang'}
                                                             style={{fontSize: '30px', color: '#999999'}}/>
                                    }
                                </Col>
                            </Row>}
                            content={
                                <Row gutter={[16, 8]}>
                                    <Col span={24}>
                                        <Form.Item>
                                            <TextArea rows={2} value={this.state.comment}
                                                      maxLength={600}
                                                      showCount
                                                      allowClear
                                                      style={{width: '60%'}}
                                                      disabled={!isLogin()}
                                                      onChange={this.handleInputComment}
                                                      placeholder={!isLogin() ? "请先登录哦！登录后即可发表评论。" : "我也要评论一下..."}/>
                                        </Form.Item>
                                    </Col>
                                    <Col span={3}>
                                        <Form.Item>
                                            <Button htmlType="submit"
                                                    onClick={this.addComment}
                                                    type="primary">
                                                发布评论
                                            </Button>
                                        </Form.Item>
                                    </Col>
                                    <Col>
                                        <Form.Item label={<span style={{color: SuperLightFontColor}}>匿名发布:</span>}>
                                            <Switch style={{
                                                float: "right",
                                                backgroundColor: this.state.isPixelate ? '' : DarkFontColor
                                            }}
                                                    size={"small"} value={this.state.isPixelate}
                                                    onChange={(e) => {
                                                        this.setState({isPixelate: e ? 1 : 0});
                                                    }}
                                            />
                                        </Form.Item>
                                    </Col>
                                </Row>
                            }
                        />
                    </Col>
                    <Col span={24}>
                        <List
                            className="comment-list"
                            itemLayout="horizontal"
                            dataSource={data.rows}
                            renderItem={(item, index) => (
                                <li key={item.id}>
                                    <Comment
                                        actions={
                                            [
                                                <span key="comment-nested-reply-to" style={{color: DarkFontColor}}
                                                      onClick={() => this.replyTo(item.id)}>
                                        {
                                            !isLogin() ? '登陆后可回复' : '回复评论'
                                        }
                                    </span>
                                            ]
                                        }
                                        author={
                                            <>
                                                <span style={{
                                                    float: "left",
                                                    color: DarkFontColor
                                                }}>{item.onlineName ? item.onlineName : "匿名用户"}</span>
                                                {this.doUserTypeIcon(item)}
                                            </>
                                        }
                                        avatar={
                                            item.avatarUrl ?
                                                <Avatar src={item.avatarUrl} alt="暂无头像"/>
                                                :
                                                <Config.IconFont type={'icon-weidenglutouxiang'}
                                                                 style={{fontSize: '30px', color: '#999999'}}/>
                                        }
                                        content={
                                            <span style={{color: SuperLightFontColor}}>{item.content}</span>
                                        }
                                        datetime={`${moment(item.commentTime, "YYYY-MM-DD hh:mm:ss").fromNow()}`}
                                    >
                                        {/* 下面是评论回复的展示 */}
                                        <ReplyContainer>
                                            {
                                                item.replies && item.replies.length > 0 ?
                                                    <>
                                                        {
                                                            this.state.seeMoreCommentIds.indexOf(item.id) !== -1 ?
                                                                item.replies.map(reply => {
                                                                    return <Comment
                                                                        key={reply.id}
                                                                        actions={1}
                                                                        author={
                                                                            <>
                                                                                <span style={{
                                                                                    float: "left",
                                                                                    color: DarkFontColor
                                                                                }}>{reply.onlineName ? reply.onlineName : "匿名用户"}</span>
                                                                                {this.doUserTypeIcon(reply)}
                                                                            </>
                                                                        }
                                                                        avatar={
                                                                            reply.avatarUrl ?
                                                                                <Avatar src={reply.avatarUrl}
                                                                                        alt="暂无头像"/>
                                                                                :
                                                                                <Config.IconFont
                                                                                    type={'icon-weidenglutouxiang'}
                                                                                    style={{
                                                                                        fontSize: '30px',
                                                                                        color: '#999999'
                                                                                    }}/>
                                                                        }
                                                                        content={<span
                                                                            style={{color: SuperLightFontColor}}>{reply.content}</span>}
                                                                        datetime={`${moment(reply.commentTime, "YYYY-MM-DD hh:mm:ss").fromNow()}`}/>
                                                                })
                                                                :
                                                                item.replies.slice(0, 3).map(reply => {
                                                                    return <Comment
                                                                        key={reply.id}
                                                                        actions={1}
                                                                        author={
                                                                            <>
                                                                                <span style={{
                                                                                    float: "left",
                                                                                    color: DarkFontColor
                                                                                }}>{reply.onlineName ? reply.onlineName : "匿名用户"}</span>
                                                                                {this.doUserTypeIcon(reply)}
                                                                            </>
                                                                        }
                                                                        avatar={
                                                                            reply.avatarUrl ?
                                                                                <Avatar src={reply.avatarUrl}
                                                                                        alt="暂无头像"/>
                                                                                :
                                                                                <Config.IconFont
                                                                                    type={'icon-weidenglutouxiang'}
                                                                                    style={{
                                                                                        fontSize: '30px',
                                                                                        color: '#999999'
                                                                                    }}/>
                                                                        }
                                                                        content={<span
                                                                            style={{color: SuperLightFontColor}}>{reply.content}</span>}
                                                                        datetime={`${moment(reply.commentTime, "YYYY-MM-DD hh:mm:ss").fromNow()}`}/>
                                                                })
                                                        }
                                                    </>
                                                    :
                                                    null
                                            }
                                            {/* 下面是用户点击“回复评论”按钮后，展示回复输入框 */}
                                            {
                                                item.replies && item.replies.length > 3 &&
                                                this.state.seeMoreCommentIds.indexOf(item.id) === -1 ?
                                                    <Divider
                                                        style={{padding: '0 0 10px 0', color: 'blue', marginTop: 0}}
                                                        plain>
                                                        <span style={{cursor: "pointer"}}
                                                              onClick={() => this.handleSeeMoreReply(item.id)}>查看更多</span>
                                                    </Divider> :
                                                    item.replies && item.replies.length > 3 &&
                                                    this.state.seeMoreCommentIds.indexOf(item.id) !== -1 ?
                                                        <Divider
                                                            style={{padding: '0 0 10px 0', color: 'blue', marginTop: 0}}
                                                            plain>
                                                            <span style={{cursor: "pointer"}}
                                                                  onClick={() => this.handlePackUpMoreReply(item.id)}>收起</span>
                                                        </Divider> : null
                                            }
                                        </ReplyContainer>
                                        {
                                            item.id === this.state.replyCommentId ?
                                                <>

                                                    <Row gutter={[1, 1]}>
                                                        <Col span={23}>
                                                            <Divider style={{margin: '10px 0'}}/>
                                                        </Col>
                                                        <Col span={20}>
                                                            <TextArea rows={3}
                                                                      value={this.state.replyCommentContent}
                                                                      maxLength={600}
                                                                      showCount
                                                                      autoSize={{ minRows: 3, maxRows: 3 }}
                                                                      allowClear
                                                                      style={{border: '1px solid #40a9ff'}}
                                                                      disabled={!isLogin()}
                                                                      onChange={this.handleInputReplyComment}
                                                                      placeholder={!isLogin() ? "请先登录哦！登录后即可回复评论。" : "我也要回复..."}/>

                                                        </Col>
                                                        <Col span={3}>
                                                            <Button style={{width: "100%", height: '79%'}}
                                                                    onClick={this.addReply}
                                                                    type={"primary"}>回复</Button>
                                                        </Col>
                                                    </Row>
                                                </>
                                                :
                                                null
                                        }
                                    </Comment>
                                    {
                                        data.rows && data.rows.length !== index + 1 ?
                                            <Divider style={{margin: '5px 0'}}/>
                                            : null
                                    }
                                </li>
                            )}
                        />
                    </Col>
                    <Col span={24} style={{textAlign: 'center'}}>
                        {
                            data.total && data.total > 0 ?
                                <Pagination size={"small"}
                                            defaultCurrent={this.state.page}
                                            current={this.state.page}
                                            total={data.total}
                                            defaultPageSize={this.state.size}
                                            onChange={this.changePage}
                                />
                                :
                                null
                        }

                    </Col>
                </Row>
                <Divider/>

            </CommentContainer>
        </>
    }
}

JComment.propTypes = {
    /* 数据 */
    data: PropTypes.object,
    /* 新增数据 */
    onSave: PropTypes.func,
    /* 加载数据 */
    onLoad: PropTypes.func,
    /* 新增回复 */
    onReply: PropTypes.func,
    /* 默认分页单页容量 */
    defaultPageSize: PropTypes.number
}

JComment.defaultProps = {
    data: null,
    onSave: null,
    onLoad: null,
    onReply: null,
    defaultPageSize: 5
}
const mapStateToProps = (state) => {
    return {
        userInfo: state.getIn(['user'])
    }
}
export default connect(mapStateToProps, null)(JComment);
